<template lang="html">
  <chart
    class="x-pie"
    :chartid='chartId'
    :option = 'options'
    :title='title'
  >
  <div class="centerCount">
    {{count}}
  </div>
  </chart>
</template>

<script>
import chart from './chart.vue'
export default {
  components : {
    chart,
  },
  props : {
    chartId :{
      type : String,
    },
    title : {
      type : String,
    },
    areaData : {
      type : Array,
    },
    seriesData:{
    	type : Array,
    }

  },
  data(){
    return {
      count : '',
      options : {
        color : ['#ec857d','#57a7ee','#9eda7c','#fcda6f'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            data:[],/*area交互数据*/
            top:130,
            right:80,
            itemWidth : 14,
            itemHeight : 6,
        },
        series: [
            {
              name:'访问来源',
              type:'pie',
              center:['30%','50%'],
              radius: ['40%', '50%'],
              avoidLabelOverlap: false,
              label: {
                  normal: {
                      show: false,
                      position: 'center'
                  },

              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data:[]
          }
    ]
}
    }
  },
  watch:{
  	areaData(val){
  		this.options.legend.data=val;
  	},
  	seriesData(val){
  		this.options.series[0].data=val;
      this.count = 0;
      val.forEach((elem) => {
        this.count += elem.value;
      })
  	}
  }
}
</script>

<style lang="scss" scoped>
.x-pie {
  position: relative;
  .centerCount {
    font-size: 30px;
    font-weight: 600;
    width: 110px;
    position: absolute;
    top: 50%;
    text-align: center;
    margin-left: 19%;
  }
}

</style>
